<template>
  <router-view>
  </router-view>
</template>

<script lang="ts">
export default {
  name: "App"
}
</script>

<style lang="less">
@import "normalize";
@import "vars";
:root {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #bbb #ddd;
  font-size: 1.125em;
  min-height: 100vh;
  background-color: #F8FAFC;
}
:root::-webkit-scrollbar {
  width: 8px;
}
:root::-webkit-scrollbar-thumb {
  background-color: #bbb;
}
:root::-webkit-scrollbar-thrack {
  background-color: #ddd;
}
@keyframes blink-animate {
  0% {
    opacity: 100%;
  }
  80% {
    opacity: 100%;
  }
  90% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
body {
  .font-sans();
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  line-height: 1.5;
  letter-spacing: 0.01em;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
}
#app {
  min-height: 100vh;
}
body.old-theme {
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: auto !important;
  font-smooth: never !important;
  text-rendering: optimizeSpeed !important;
  user-select: none !important;
  transform: translateZ(0);
  animation: 150ms linear 5ms blink-animate infinite !important;
  * {
    all: initial !important;
    display: block !important;
    font-family: simsun !important;
    line-height: 1 !important;
    color: #1111AA !important;
  }
  li {
    display: list-item !important;
    list-style: disc !important;
  }
  .clickable {
    text-decoration: underline !important;
  }
  img {
    max-height: 64px !important;
    max-width: 64px !important;
    filter: grayscale(1) !important;
  }
  .shop-blank {
    display: none !important;
  }
  .shop-btn-close {
    color: transparent !important;
  }
  .shop-btn-close:before {
    content: "Close" !important;
    color: black !important;
    text-decoration: underline !important;
  }
  .error-message {
    display: none !important;
    &.show-error-message {
      display: block !important;
    }
  }
  .checkout-item * {
    display: inline !important
  }
}
</style>
